<script setup>
import { getMessagesPageAPI } from '@/api/message'
import { ref } from 'vue';
//任务列表数据
const notifyList = ref([])
// 是否为空列表
const isEmpty = ref(false)
const notifyData = {
  contentType: 201,
  page: 1,
  pageSize: 10
}
//总页数
const totalPage = ref(1)
// 是否加载完成
const isTriggered = ref(false)
//已读未读
const icUnread = ref(true)

//获取分页查询消息列表
const getMessageList = async () => {
  const { data } = await getMessagesPageAPI(notifyData)
  // console.log(data);
  notifyList.value = data.items
  totalPage.value = data.pages
}
getMessageList()



//上拉刷新
const onScrollToLower = async () => {
  if (notifyData.page >= totalPage.value) {
    isEmpty.value = true
    return
  }
  notifyData.page++
  const { data } = await getMessagesPageAPI(notifyData)
  notifyList.value = [...notifyList.value, ...data.items]
}

//下拉刷新
const onScrollViewRefresh = async () => {
  // console.log('下拉刷新');
  isTriggered.value = true
  notifyData.page = 1
  notifyList.value = []
  await getMessageList()
  isTriggered.value = false
}



</script>


<template>
  <scroll-view class="scroll-view" refresher-enabled scroll-y :refresher-triggered="isTriggered"
    @refresherrefresh="onScrollViewRefresh" @scrolltolower="onScrollToLower">
    <view class="scroll-view-wrapper">
      <view class="message-action" @click="icUnread=false">
        <text class="iconfont icon-clear"></text>
        全部已读
      </view>
      <uni-card :border="false" :is-shadow="false" v-for="item in notifyList" :key="item.id">
        <view class="brief">{{ item.content }}</view>
        <view class="extra">
          <text class="time">{{ item.created }}</text>
          <navigator hover-class="none" class="link" :url="`/subpkg_message/content/index?id=${item.id}`">查看详情</navigator>
        </view>
        <template v-slot:title>
          <view class="title" :class="{unread:icUnread}">{{ item.title }}</view>
        </template>
      </uni-card>
      <view v-if="notifyList.length === 0" class="message-blank">暂无消息</view>
      <view v-if="isEmpty">没有数据了</view>
    </view>
  </scroll-view>
</template>

<style lang="scss" scoped>
@import './styles.scss';
</style>
